<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由开发-vue-router</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- <a href="#">展示登录组件</a>    
        <a href="#">展示注册组件</a>    
        <a href="#">展示用户列表组件</a>     -->
        <a href="#/login">展示登录组件</a>
        <router-link to="/login" tag="button">展示登录组件</router-link>    
        <router-link to="/register">展示注册组件</router-link>    
        <router-link to="/userList">展示用户列表组件</router-link>    
       <!-- 路由出口 -->
       <!-- 路由匹配到的组件将渲染在这里 -->
       <router-view></router-view>
    </div>
    <!-- 登录组件 -->
     <template id="login"> 
        <div>
            <h2>登录组件</h2>
            <input type="text" placeholder="请输入用户名"></input>
            <input type="password" placeholder="请输入密码"></input>
            <button>登录</button>
        </div>
    </template>
    <!-- 注册组件 -->
    <template id="register"> 
        <div>
            <h2>注册组件</h2>
            <input type="text" placeholder="请输入用户名"></input>
            <input type="password" placeholder="请输入密码"></input>
            <button>注册</button>
        </div>
    </template>
    <!-- 用户列表组件 -->
     <template id="userList"> 
        <div>
            <h2>用户列表组件</h2>
            <button>添加用户</button>
            <ul>
                <li v-for=" user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>
    </template>
</body>
</html>
<!-- <script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script> -->
<script type="module">
import {} from './js/vue.js'
import {} from './js/vue-router.js'
// 创建组件
let login={
    template: '#login'
};
let register={
    template: '#register'
};
let userList={
    template: '#userList',
    data(){
        return{
            users: [
                {name: '张三'},
                {name: '李四'},
                {name: '王五'},
            ]
        }
    }
};
//创建路由规则
let routes = [
    // 默认路由 展示用户列表组件
    // {path: '/', component: userList},
    // 第二种写法 通过redirect（重定向）属性跳转到用户列表组件
    {path: '/', redirect:'/userList'},
    {path: '/login', component: login},
    {path: '/register', component: register},
    {path: '/userList', component: userList},
];
//创建路由对象
let router = new VueRouter({
    routes
});
let app = new Vue({
    el: '#app',
    data: {
        msg: 'vue路由开发'
    },
    router, //挂载路由对象
})

</script>